<template>
  <transition name="fromBottom">
    <div class="footer-nav-root" v-show="showNav">
      <div 
        v-for="nav in navs"
        :key="nav.path"
        class="nav" 
        :class="{'selected':isSelectedNav(nav)}" 
        @touchend="onSelectedNav(nav)"
      >
        <div class="icon">
          <i class="iconfont" :class="nav.iconClassName"></i>
        </div>
        <div class="label">{{nav.label}}</div>
      </div>
    </div>
  </transition>
</template>

<script>
  import store from '@/store'

  export default {
    name: 'footNav',

    data () {
      return {
      }
    },

    computed: {
      warrantyAppId () {
        let plugin = store.getters[`plugin/warranty`]
        let appId = plugin && plugin.id
        return appId
      },

      navs () {
        let result = [
          {
            label: '首页',
            path: '/homepage',
            iconClassName: 'icon-shouye'
          },
          {
            label: '工单中心',
            path: '/work-orders',
            iconClassName: 'icon-createtask' // 这里定义类名  然后在文件最下方添加这个类名并且添加背景图片作为图标
          },
          {
            label: '我的账户',
            path: '/acount',
            iconClassName: 'icon-people'
          }
        ]
        return result
      },
      // 当前路径
      path () {
        return this.$route.path
      },
      routerName () {
        return this.$route.name
      },

      // 是否显示当前底部导航
      showNav () {
        var result = false
        const showNavRouterName = [
          'homepage',
          'work-orders-list',
          'acount'
        ]
        showNavRouterName.forEach((item) => {
          if (this.routerName === item) {
            result = true
          }
        })
        return result
      }
    },

    methods: {
      /*
       * 判断当前导航是否选中
       */
      isSelectedNav (nav) {
        let reg = new RegExp('^' + nav.path)
        return reg.test(this.path)
      },

      /*
       * 导航点击事件
       */
      onSelectedNav (nav) {
        let {path} = nav
        window.document.title = nav.label
        this.$router.replace(path)
      }
    }
  }
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/default.styl'
  .footer-nav-root
    width 100%
    height 1.5rem
    background #fff
    position fixed
    bottom 0
    border-top 1px solid #cdcdcd
    display flex
    justify-content space-around
    .nav
      width 2rem
      height 100%
      color Gray
      box-sizing border-box
      .icon
        width 0.8rem
        height 0.8rem
        margin 0.2rem auto 0
        background no-repeat center bottom
        background-size 100% 100%
        text-align center
        .iconfont
          font-size 0.75rem

      .label
        width 100%
        height 0.5rem
        text-align center
        font-size fSizeS
        line-height 0.4rem
      &.selected
        color Red
    &.selected
      color Gray
</style>
